<html>
    <head>
        <title>动态过渡</title>
    </head>
    <body>
        <script>
            // 动态过渡
                    /*
                        在Vue中即使是过渡也是数据驱动的！
                        动态过渡最基本的例子是通过 name 标签属性来绑定动态值。

                               <transition v-bind:name="transitionName">
                                    .....
                               </transition>

                        当你想用Vue的过渡系统来定义CSS过渡/动画在不同过渡期间切换回非常有用。

                        过渡组件<transition> 和 <transition-group> 组件的 attribute 都可以动态绑定，但我们不仅仅只有 attribute 可以利用，还可以通过事件钩子
                        获取上下文中的所有数据，因为时间钩子都是方法。
                        这意味着，根据组件的状态不同，你的JavaScript过渡会有不同的表现：

                            例如：
                                <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"><-/script>
                                
                                <div id="dynamic-fade-demo" class="demo">
                                    Fade In <input type="range" v-model="fadeInDuration" min="0"  v-bind:max="maxFadeDuration">
                                    Fade Out <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
                                    <transition
                                        v-bind:css="false"
                                        v-on:before-enter="beforEnter"
                                        v-on:enter="enter"
                                        v-on:leave="leave"
                                    >
                                        <p v-if="show">hello</p>
                                    </transition>
                                    <button v-if="stop" v-on:click="stop=false;show=false">
                                        Start animating
                                    </button>
                                    <button v-else
                                            v-on:click="stop=true"
                                    >
                                    Stop it!
                                    </button>
                                </div>
                    */
                                 new Vue({
                                    el:'#dynamic-fade-demo',
                                    data:{
                                        show:true,
                                        fadeInDuration:1000,
                                        fadeOutDuration:1000,
                                        maxFadeDuration:1500,
                                        stop:true
                                    },
                                    mounted() {
                                        this.show=false;
                                    },
                                    methods:{
                                        beforeEnter:function(el){
                                            el.style.opactity=0
                                        },
                                        enter:function(el,done){
                                            var vm=this;
                                            Velocity(el,
                                                    {opacity:1},
                                                    {   
                                                        duration:this.fadeInDuration,
                                                        complete:function(){
                                                            done()
                                                            if(!vm.stop) vm.stop=true
                                                        }
                                                    }
                                            )
                                        },
                                        leave:function(el,done){
                                            var vm= this;
                                            Velocity(el,
                                                { opacity: 0 },
                                                {
                                                    duration: this.fadeOutDuration,
                                                        complete: function () {
                                                            done()
                                                            vm.show = true
                                                        }
                                                }
                                            )
                                        }
                                    }
                                 })
        </script>
    </body>
</html>